<script setup lang="ts">

const props = withDefaults(defineProps<{
    title: string,
}>(), {
    title: '可视化标题',
});

</script>
<template>
    <div class="box">
        <div class="box-title text-center text-xl font-weight-bold">{{ props.title }}</div>
        <slot></slot>

        <div class="box-footer"></div>
    </div>
</template>

<style scoped lang="less">
.box {
    border: 1px solid rgba(25, 186, 139, .17);
    background: rgba(255, 255, 255, .04) url(../assets/line.png);
    background-size: 100% auto;
    position: relative;
    margin-bottom: 1rem;
    z-index: 10;
    width: 100%;
}

.box:before,
.box:after {
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    content: "";
    border-top: 2px solid #02a6b5;
    top: 0;
}

.box:before,
.box-footer:before {
    border-left: 2px solid #02a6b5;
    left: 0;
}

.box:after,
.box-footer:after {
    border-right: 2px solid #02a6b5;
    right: 0;
}

.box-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
}

.box-footer:before,
.box-footer:after {
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    content: "";
    border-bottom: 2px solid #02a6b5;
    bottom: 0;
}
</style>
